<template style="caret-color: transparent;">
  <Navigation></Navigation>
  <div class="cared">
    <el-card shadow="always" style="width: 900px">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
      <div class="int">
        <li>名称</li>
        <el-form-item  prop="name">
        <el-input v-model="ruleForm.name" style="width: 800px" placeholder="请输入竞赛名称" />
        </el-form-item>
        <div class="demo-date-picker">
          <div class="block">
            <li class="demonstration">报名开始时间</li>
            <el-form-item prop="SignStartData">
            <el-date-picker
                v-model="ruleForm.SignStartData"
                type="date"
                placeholder="选择报名开始时间"
                value-format="YYYY-MM-DD"
                validate-event="true"
            />
              </el-form-item>
          </div>
          <div class="demo-date-picker">
            <div class="block">
              <li class="demonstration">报名结束时间</li>
              <el-form-item prop="SignEndData">
              <el-date-picker
                  v-model="ruleForm.SignEndData"
                  type="date"
                  placeholder="选择报名结束时间"
                  value-format="YYYY-MM-DD"
              />
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="demo-date-picker1">
          <div class="block1">
            <li class="demonstration">竞赛开始时间</li>
            <el-form-item prop="StartData">
            <el-date-picker
                v-model="ruleForm.StartData"
                type="date"
                placeholder="选择竞赛开始时间"
                value-format="YYYY-MM-DD"
            />
            </el-form-item>
          </div>
        </div>
        <div class="demo-date-picker1">
          <div class="block1">
            <li class="demonstration">竞赛结束时间</li>
            <el-form-item  prop="EndData">
            <el-date-picker
                v-model="ruleForm.EndData"
                type="date"
                placeholder="选择竞赛结束时间"
                value-format="YYYY-MM-DD"
            />
            </el-form-item>
          </div>
        </div>
        <li>主办学院</li>
        <el-form-item  prop="sponsor">
        <el-input v-model="ruleForm.sponsor" style="width: 800px" placeholder="请输入主办学院" />
        </el-form-item>
        <li>详情描述</li>
        <el-form-item  prop="desc">
        <el-input v-model="ruleForm.desc" style="width: 800px" placeholder="请输入竞赛详情描述" />
        </el-form-item>
        <li>竞赛类型</li>
        <div class="my-2">
          <el-form-item prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio value="001">竞赛</el-radio>
            <el-radio value="002">活动</el-radio>
          </el-radio-group>
          </el-form-item>
        </div>
        <div class="img">
          <el-upload
              class="upload-demo"
              drag
              action="http://123.249.101.250:3000/TbCompetitionActivityController/upload"
              multiple
              name="myFile"
              :on-success="doSuccess"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              请您手动上传 <em>竞赛或活动照片封面</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>
          <div>
            {{face}}
            <el-image :src="'http://123.249.101.250:3000/static/'+face"></el-image>
          </div>
        </div>
        <div class="btn">
          <el-button type="success" @click="addactive(ruleFormRef)">
            确认发布
          </el-button>
        </div>
      </div>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import Navigation from "@/components/Navigation.vue";
import { UploadFilled } from '@element-plus/icons-vue'
import {onMounted, ref ,reactive} from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import API from "@/api/StuIndex";

interface RuleForm{
  name: string
  desc: string
  SignStartData: Date
  SignEndData: Date
  StartData: Date
  EndData: Date
  type: string
  sponsor: string
  face: string
  radio: string
  comId: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  desc: '',
  SignStartData: null,
  SignEndData: null,
  StartData: null,
  EndData: null,
  type: '',
  sponsor: '',
  face: '',
  radio: '',
  comId: ''
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入竞赛或活动名称', trigger: 'blur' },
    {min:3, max: 15, message: '长度不能少于3个或者超过15个字符', trigger: 'blur' },
  ],
  desc: [
    { required: true, message: '请输入竞赛或活动详情描述', trigger: 'blur' },
    {min:3, max: 50, message: '长度不能少于3个或者超过超过50个字符', trigger: 'blur' ,}
  ],
  SignStartData: [
    { required: true, message: '请输入报名开始时间', trigger: 'change' },
  ],
  SignEndData: [
    { required: true, message: '请输入报名结束时间', trigger: 'change' },
  ],
  StartData: [
    { required: true, message: '请输入竞赛开始时间', trigger: 'change' },
  ],
  EndData: [
    { required: true, message: '请输入竞赛开始时间', trigger: 'change' },
  ],
  type: [
      { required: true, message: '请选择竞赛或活动类型', trigger: 'change' },
  ],
  sponsor: [
    { required: true, message: '请输入主办学院', trigger: 'blur' },
  ],
  face: [
    { required: true, message: '请上传正确格式的照片', trigger: 'blur' },
  ],

})

onMounted(()=>{
  getUserInfo();
})

const face = ref('')
const id = localStorage.getItem('token')


const userInfo = ref([])
const getUserInfo = () => {
  API
  .get(`/TbUserinfoController/getUserinfoById/${id}`).then(res=>{
    console.log(res);
    userInfo.value = res.data.data
    console.log(userInfo.value)
  })
}
const doSuccess = (data) =>{
  face.value = data.data
  alert(data.data)
}
const addactive = async(formEl: FormInstance | undefined) => {
  if (!ruleForm.name || !ruleForm.desc || !ruleForm.SignStartData || !ruleForm.SignEndData || !ruleForm.StartData || !ruleForm.EndData || !ruleForm.sponsor || !ruleForm.type || !face.value) {
    alert('请填写所有必填项');
    return;
  }
  fetch('http://localhost:3000/TbCompetitionActivityController/addCompettionActivity', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: ruleForm.name,
      comDesc: ruleForm.desc,
      signstartdate: new Date(ruleForm.SignStartData),
      signenddate: new Date(ruleForm.SignEndData),
      startdate: new Date(ruleForm.StartData),
      enddate: new Date(ruleForm.EndData),
      sponsor: ruleForm.sponsor,
      type: ruleForm.type,
      face: face.value,
      comId: userInfo.value.comId
    })
  }).then(res => res.json()).then( data => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {
        console.log('addactive!')
        alert('发布成功！')
        window.location.href = '/teainfo'
      } else {
        console.log('error submit!', fields)
      }
    })
  })
}

</script>
<style  scoped>
.cared{
  caret-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 1700px;
  margin-top: 90px;
}
.int{
  display: flex;
  flex-direction: column;
}
.int li{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: bold;
  list-style: none;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-top: 15px;
  margin-bottom: 10px;
}
.demo-date-picker .demonstration {
  display: flex;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: bold;
  list-style: none;
}
.my-2{
  margin-top: 10px;
}
.my-2 .el-radio{
  margin-top: -30px;
  margin-left: -10px;
  padding: 10px;
}
.btn{
  width: 120px;
  height: 40px;
  flex: content;
  margin-top: 10px;
  margin:auto;
}
.btn .el-button{
  border-radius: 30px;
}


</style>